﻿<%@ Page Title="mapinfo" Language="C#" MasterPageFile="~/EasyUI.master" AutoEventWireup="true" CodeBehind="List.aspx.cs" Inherits="jnagr.Web.mapinfo.List" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=6a5e0746feee514e8bb7b3f468a626d1">
    </script>
    <style type="text/css">
        #mymap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }

        .fite {
            margin-left: 4px;
        }

            .fite label {
                width: 100px;
                float: left;
                line-height: 35px;
            }
    </style>

    <script type="text/javascript">
        var pt;
        var uid = "";
        var map;
        var pro = "";
        var city = "";
        var county = "";
        var icon1 = new BMap.Icon('../images/map1.gif', new BMap.Size(18, 34), { anchor: new BMap.Size(9, 34) });
        var icon2 = new BMap.Icon('../images/map2.gif', new BMap.Size(18, 34), { anchor: new BMap.Size(9, 34) });
        var icon3 = new BMap.Icon('../images/map3.gif', new BMap.Size(18, 34), { anchor: new BMap.Size(9, 34) });
        var icon4 = new BMap.Icon('../images/map4.gif', new BMap.Size(18, 34), { anchor: new BMap.Size(9, 34) });
        Date.prototype.pattern = function (fmt) {
            var o = {
                "M+": this.getMonth() + 1, //月份        
                "d+": this.getDate(), //日        
                "h+": this.getHours() % 12 == 0 ? 12 : this.getHours() % 12, //小时        
                "H+": this.getHours(), //小时        
                "m+": this.getMinutes(), //分        
                "s+": this.getSeconds(), //秒        
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度        
                "S": this.getMilliseconds() //毫秒        
            };
            var week = {
                "0": "/u65e5",
                "1": "/u4e00",
                "2": "/u4e8c",
                "3": "/u4e09",
                "4": "/u56db",
                "5": "/u4e94",
                "6": "/u516d"
            };
            if (/(y+)/.test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            }
            if (/(E+)/.test(fmt)) {
                fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "/u661f/u671f" : "/u5468") : "") + week[this.getDay() + ""]);
            }
            for (var k in o) {
                if (new RegExp("(" + k + ")").test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                }
            }
            return fmt;
        }
        $(function () {
            InitTree();
            InitMap();

        });

        function InitMap() {
            map = new BMap.Map("mymap");          // 创建地图实例 
            map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
            //map.setCurrentCity("济南");          // 设置地图显示的城市 此项是必须设置的
            if (county != "")
                map.centerAndZoom(county, 13);
            else if (city != "")
                map.centerAndZoom(city, 11);
            else if (pro != "")
                map.centerAndZoom(pro, 9);
            else
                map.centerAndZoom("济南", 11);
            map.enableScrollWheelZoom(true);
            var top_left_control = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT });// 左上角，添加比例尺
            var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
            map.addControl(top_left_control);
            map.addControl(top_left_navigation);
            var geoc = new BMap.Geocoder();
            map.addEventListener("click", function (e) {
                if (pt != "")
                    map.clearOverlays(pt);
                pt = e.point;
                $("#mjd").val(e.point.lng);
                $("#mwd").val(e.point.lat);
                geoc.getLocation(pt, function (rs) {
                    var addComp = rs.addressComponents;
                    $("#madd").val(addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber);
                });
                map.addOverlay(new BMap.Marker(pt));
            });
        }

        function InitTree() {
            uid = getUrlParam("uid");
            pro = decodeURI(getUrlParam("pro"));
            city = decodeURI(getUrlParam("city"));
            county = decodeURI(getUrlParam("county"));
            document.getElementById("test").value = "add";
            $('#uid').val(uid);
            $('#btn').click(saveNode);
            $('#tt').datagrid({
                title: '测报点列表', //表格标题
                url: 'GetMaps.ashx', //请求数据的页面
                sortName: 'mname', //排序字段
                idField: 'mid', //标识字段,主键
                iconCls: '', //标题左边的图标
                width: '95%', //宽度
                height: '95%', //高度
                nowrap: false, //是否换行，True 就会把数据显示在一行里
                striped: true, //True 奇偶行使用不同背景色
                collapsible: false, //可折叠
                sortOrder: 'desc', //排序类型
                remoteSort: true, //定义是否从服务器给数据排序
                fitColumns: true,
                singleSelect: true,
                method: 'post',
                columns: [[
                    { field: 'ckb', checkbox: true },
	                { title: '测报站名', field: 'mname', width: 80, sortable: true },
                    {
                        title: '级别', field: 'mlevel', width: 80, formatter: function (value, row, index) {
                            if (value == 1) {
                                return "县级";
                            } else if (value == 2) {
                                return "市级";
                            } else if (value == 3) {
                                return "省级";
                            } else if (value == 4) {
                                return "国家级";
                            }
                        }
                    },
                    {
                        title: '创建时间', field: 'mdatetime', width: 100, sortable: true, formatter: function (value, row, index) {
                            if (value != "") {
                                if (value.indexOf("-") != -1)
                                    value = value.replace(/-/g, "/");
                                return new Date(value).pattern("yyyy年M月d日");
                            }
                        }
                    }

                ]],
                toolbar: "#tab_toolbar",
                queryParams: { "action": "querymy", "uid": uid },
                pageNumber: 1, //默认索引页
                pageSize: 200, //默认一页数据条数
                rownumbers: true, //行号
                pageList: [10, 20, 50, 200, 500],
                onSelect: function () {
                    editNode();
                }
            });
        }
        function newNode() {
            if ($('#tt').datagrid('getData').rows.length > 0) {
                $.messager.alert("提示", "每人只能创建一个测报点！", "info");
                return;

            }
            $('#fm').form('clear');
            $('#mlevel').combobox('setValue', '1');
            uid = getUrlParam("uid");
            $('#uid').val(uid);
            document.getElementById("test").value = "add";
        }
        function editNode() {
            var row = $('#tt').datagrid('getSelected');
            if (row == null) {
                $.messager.alert("提示", "请选择要修改的数据！", "info");
            }
            if (row) {
                $('#fm').form('load', row);
                $('#mlevel').combobox('setValue', row.mlevel);
                if (pt != "")
                    map.clearOverlays(pt);
                pt = new BMap.Point(row.mjd, row.mwd);
                if (row.mlevel == '4')
                    map.addOverlay(new BMap.Marker(pt, { icon: icon4 }));
                else if (row.mlevel == '3')
                    map.addOverlay(new BMap.Marker(pt, { icon: icon3 }));
                else if (row.mlevel == '2')
                    map.addOverlay(new BMap.Marker(pt, { icon: icon2 }));
                else if (row.mlevel == '1')
                    map.addOverlay(new BMap.Marker(pt, { icon: icon1 }));
                selectNode = row;
                $('#mpic').val(row.mpic);
                $('#tpic').val("");
                document.getElementById("test").value = "modify";

            }
        }
        function saveNode() {
            var test = document.getElementById("test").value;
            var f = $('#fm');
            if (test == "add") {
                f.form('submit', {
                    url: "GetMaps.ashx?action=" + test,
                    onSubmit: function () {
                        return $(this).form('validate');
                    },
                    success: function (result) {
                        if (result.indexOf("T") == 0) {
                            //$('#dlg').dialog('close');
                            $.messager.alert("提示", "恭喜您，信息添加成功", "info");
                            $('#tt').datagrid('reload');
                        }
                        else if ((result.indexOf("F") == 0)) {
                            $.messager.alert("提示", "添加失败，请重新操作！", "info");
                            return;
                        }
                        else if ((result.indexOf("L") == 0)) {
                            $.messager.alert("提示", "长时间没有操作，请重新登录！", "info");
                            top.location = '/index.aspx';
                            return;
                        }
                    }
                });

            } else {
                $('#fm').form('submit', {
                    url: "GetMaps.ashx?action=" + test,
                    onSubmit: function () {
                        return $(this).form('validate');
                    },
                    success: function (result) {
                        if (result.indexOf("T") == 0) {
                            $.messager.alert("提示", "恭喜您，信息修改成功", "info");
                            $('#tt').datagrid('reload');
                        }
                        else {
                            $.messager.alert("提示", "修改失败，请重新操作！", "info");
                            return;
                        }
                    }
                });
            }
        }
        function removeUser() {
            var test = document.getElementById("test").value = "delete";
            var row = $('#tt').datagrid('getSelected');
            if (row == null) {
                $.messager.alert("提示", "请选择要删除的数据！", "info");
            }

            if (row) {

                $.messager.confirm('提示', '你确定要删除这条信息吗？', function (r) {
                    if (r) {
                        $('#fm').form('submit', {
                            url: 'GetMaps.ashx?mid=' + row.mid + "&action=" + test,
                            onSubmit: function () {
                            },
                            success: function (result) {
                                if (result.indexOf("T") == 0) {
                                    $.messager.alert("提示", "恭喜您，信息删除成功！", "info");
                                    $('#tt').datagrid('reload');
                                }
                                else {
                                    $.messager.alert("提示", "删除失败，请重新操作！", "info");
                                    return;
                                }
                            }
                        });
                    }
                })
            }
        }

        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg);  //匹配目标参数
            if (r != null) return unescape(r[2]); return null; //返回参数值
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="easyui-layout" style="width: 100%; height: 100%;" id="mycon">
        <div region="west" split="true" style="width: 300px; overflow: auto" id="west">
            <table id="tt">
            </table>

        </div>
        <div region="center" style="background: #eee; overflow: auto">
            <div class="easyui-layout" data-options="fit:true">
                <div region="west" split="true" style="width: 200px; overflow: auto">
                    <form id="fm" method="post" enctype="multipart/form-data">

                        <div class="fite">
                            <label>测报点级别：</label>
                            <select id="mlevel" class="easyui-combobox" name="mlevel" style="width: 120px;">
                                <option value="4">国家级</option>
                                <option value="3">省级</option>
                                <option value="2">市级</option>
                                <option value="1" selected="selected">县级</option>
                            </select>
                            <input name="mjd" id="mjd" type="hidden" />
                            <input name="mwd" id="mwd" type="hidden" />
                            <input name="uid" id="uid" type="hidden" />
                            <input name="mid" id="mid" type="hidden" />
                            <input name="test" id="test" type="hidden" />

                        </div>

                        <div class="fite">
                            <label>测报点名称：</label>
                            <input id="mname" name="mname" class="easyui-validatebox" data-options="required:true" />
                        </div>
                        <div class="fite">
                            <label>测报点创建时间：</label>
                            <input id="mdatetime" name="mdatetime" class="easyui-datebox" data-options="required:true" />
                        </div>
                        <div class="fite">
                            <label>地址：</label>
                            <textarea id="madd" name="madd" class="easyui-validatebox"></textarea>
                        </div>
                        <div class="fite">
                            <label>图片：</label>
                            <input id="tpic" name="tpic" type="file" style="width: 150px;" />
                            <input id="mpic" name="mpic" type="hidden" />
                        </div>

                        <div class="fite">
                            <label>备注：</label>
                            <textarea id="mmark" name="mmark" style="width: 150px;"></textarea>
                        </div>
                        <div class="fite">
                            <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存</a>
                        </div>
                    </form>

                </div>
                <div region="center" style="background: #eee; overflow: auto">
                    <div id="mymap"></div>
                </div>
            </div>
        </div>
    </div>
    <div id="tab_toolbar">
        <a href="#" onclick="newNode();" data-options="iconCls:'icon-add'" class="easyui-linkbutton"></a>
        <a href="#" onclick="editNode() " data-options="iconCls:'icon-edit'" class="easyui-linkbutton"></a>
        <a href="#" onclick="removeUser();return false;" data-options="iconCls:'icon-cancel'" class="easyui-linkbutton"></a>
    </div>
</asp:Content>
